<template>
  <div class="zz-proj-select">
    <div class="active text-cut">{{ activeItem.title }}</div>
    <ul class="proj-menu-list">
      <li class="proj-menu-list-item" v-for="e in items" :key="e.name">
        <a class="menu-list-item-title" @click="handleClick(e)">{{ e.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import {getQueryAttr} from "../../../lib/earth.js";

const $items = (function() {
  const disable = true;
  const leaves = true;
  return [
    { name: 'orthographic', key:"orthographic", icon: 'el-icon-setting', title: '正射投影', disable },
    { name: 'equirectangular', key:"equirectangular", icon: 'el-icon-setting', title: '等距圆柱投影', disable },
    { name: 'patterson', key:"patterson", icon: 'el-icon-setting', title: '帕特森投影', disable },
    { name: 'winkel3', key:"winkel3", icon: 'el-icon-setting', title: '温克尔三投影', disable },
    { name: 'conic_equidistant', key:"conic_equidistant", icon: 'el-icon-printer', title: '等距圆锥投影', disable },
    { name: 'atlantis', key:"atlantis", icon: 'el-icon-cold-drink', title: '亚特兰蒂斯投影', disable },
    { name: 'stereographic', key:"stereographic", icon: 'el-icon-setting', title: '立体投影', disable },
    { name: 'waterman', key:"waterman", icon: 'el-icon-setting', title: '沃特曼蝴蝶投影', disable },
  ];
})();

export default defineComponent({
  name: 'zz-proj-select',
  components: {},
  props: {
    theme: {
      type: String,
      default: 'light' //dark
    },
    selected: {
      type: String,
      default: 'orthographic' //dark
    }
  },
  setup(props, context) {

    const handleClick = (e) => {
      context.emit('update:selected', e.key);
    };
    return {
      handleClick,
    };
  },
  data() {
    return {
      items: $items,
      show: false
    };
  },
  computed: {
    activeItem() {
      const xx = $items.filter(e => e.key === this.selected);
      return xx[0];
    }
  },
  watch: {},
  mounted() {
    const attr = getQueryAttr();
      this.$nextTick(() => {
        this.$emit('update:selected', attr.projection_type);
      });
  },
  methods: {}
});
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';

.zz-proj-select {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 2em;
  // padding: 0 10px 0 0;
  color: rgba(255, 255, 255, 0.8);
  & > .active {
    height: 2em;
    line-height: 2em;
    // max-width: 7em;
    padding: 0 10px 0 10px;
    background-color: rgba(0, 0, 0, 0.33);
  }
  & > .active,
  .menu-list-item-title {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    &:hover {
      color: #1890ff;
    }
  }

  ul {
    padding: 0;
    margin: 0;
    border: none;
    list-style: none;
  }
  ul.proj-menu-list {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    transition: all 1000ms;

    & > li.proj-menu-list-item {
      position: relative;
      line-height: 2em;
      padding: 0 15px;
      // margin: 0 1em;
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
  
  &:hover {
    ul.proj-menu-list {
      opacity: 1;
      display: flex;
      visibility: visible;
    }
  }
}
</style>
